<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内涵意义</title>
    <link rel="stylesheet" href="../css/all.css" />
    <script src="../js/echarts.common.js"></script>
    <script src="../js/echarts-wordcloud.min.js"></script>
    <style>
      .container {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100vh;
        background-image: url("../img/bac1.png");
        background-size: cover;
      } /* 头部 */
      .header {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        justify-content: space-around;
        /* background-color: #008c8c; */
      }
      .header-left {
        display: flex;
        width: 80%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        background-image: url("../img/introduce/zuzi.png");
        background-size: 30% 100%;
        background-position: 0%;
        background-repeat: no-repeat;
        padding-left: 30px;
        z-index: 3;
      }
      .logo {
        background-image: url("../img/introduce/logo.png");
        background-size: 198% 360%;
        background-repeat: no-repeat;
        width: 60px;
        height: 55px;
        background-position: 50% 70%;
        cursor: pointer;
        /* background-color: aqua; */
      }
      /* 头部 */
      .title {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 3.3em;
        font-family: font3;
        color: #789a89;
        padding-left: 14px;
        z-index: 1;
      }
      .header-right {
        display: flex;
        width: 18%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 23px;
      }
      .header-right > ul {
        display: flex;
        height: 10%;
        width: 15%;
        list-style-type: none;
      }
      .header-right > ul > li {
        position: relative;
        font-family: font3;
        height: auto;
        font-size: 2.3em;
        transition: all 0.5s ease;
        font-weight: bold;
        padding-left: 24px;
        color: #8f3536;
        cursor: pointer;
      }
      .header-right > ul > li.active {
        color: #83a795;
      }
      .header-right > ul > li > a {
        text-decoration: none; /* 取消下划线 */
        color: inherit; /* 继承父元素的文字颜色 */
        cursor: pointer; /* 鼠标悬停时显示手型 */
      }
      .header-right > ul > li:hover {
        transition: all 0.5s ease;
        color: #83a795;
      }
      .header-right > ul > li:not(:first-child)::after {
        content: "";
        width: 4px;
        height: 50px;
        left: 7px;
        position: absolute;
        top: 15px;
        background-color: #8f3536;
      }
      /* 头部结束 */
      .main {
        display: flex;
        height: 80%;
        width: 100%;
        justify-content: center;
        align-items: center;

        transition: all 0.5s ease;
        /* background-color: #789a89; */
        position: relative;
        opacity: 0;
      }
      .main-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 75%;
        height: 95%;
        position: relative;
        /* background-color: #8f3536; */
      }
      .cloud {
        display: flex;
        width: 38%;
        height: 75%;
        justify-content: center;
        align-items: center;
        /* background-color: #789a89; */
        transform: translateY(-10%);
      }
      /*求 */
      .ball1 {
        display: flex;
        position: absolute;
        width: 20%;
        height: 20%;
        /* background-color: #81a594; */
        left: 10%;
        bottom: 5%;
      }
      .ball1-container {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #81a594; */
      }
      .main-ball1 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 80px;
        font-family: font3;
        font-size: 4.5em;
        position: absolute;
        left: 20%;
        top: -10%;
        border: 4px solid #505050;
        border-radius: 100%;
        background-color: #81a594;
        z-index: 2;
      }
      .main-ball1::after {
        content: "----";
        width: 160px;
        height: 2px;
        position: absolute;
        transform: rotate(-27deg);
        left: 90%;
        bottom: 170%;
        opacity: 0.6;
        background-color: linear-gradient(to bottom, #000000, #ffffff);
      }
      .ballText {
        width: 14em;
        height: 9em;
        display: flex;
        font-family: font3;
        justify-content: center;
        background-color: #90afa1;
        position: absolute;
        flex-direction: column;
        align-items: center;
        left: 0;
        top: 0;
        transform: translateX(-80%) translateY(-120%);
        border: 3px solid #505050;
        z-index: 20;
      }
      .ballText p {
        padding-left: 0.2em;
        font-weight: 1em;
        font-size: 3em;
      }
      .ballText span {
        display: inline-block;
        font-size: 1.7em;
        letter-spacing: 0.03em;
        font-family: font3;
        padding-left: 0.4em;
        color: #837f7e;
        text-shadow: 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black,
          1px 1px 0 black;
      }
      .ballText1::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 35px;
        background-color: #837f7e;
        right: 0;
        bottom: 0;
        background-color: #f4dfb1;
        border-radius: 100%;

        transform: translateX(30%) translateY(40%);
        border: 3px solid #505050;
      }

      /* 球2 */
      .ball2 {
        display: flex;
        position: absolute;
        width: 20%;
        height: 20%;
        /* background-color: #81a594; */
        right: 2%;
        top: -7%;
        z-index: 2;
      }
      .ball2-container {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #81a594; */
      }
      .main-ball2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
        width: 70px;
        font-family: font3;
        font-size: 4.5em;
        position: absolute;
        left: -5%;
        top: 1%;
        border: 4px solid #505050;
        border-radius: 100%;
        background-color: #73939e;
      }
      .main-ball2::after {
        content: "----";
        width: 140px;
        height: 2px;
        position: absolute;
        transform: rotate(-35deg);
        right: 90%;
        top: 80%;
        opacity: 0.6;
        background-color: linear-gradient(to bottom, #000000, #ffffff);
      }
      .ballText.ballText2 {
        width: 14em;
        height: 9em;
        display: flex;
        font-family: font3;
        justify-content: center;
        background-color: #73939e;
        position: absolute;
        flex-direction: column;
        align-items: center;
        transform: translateX(30%) translateY(61%);
        border: 3px solid #505050;
        bottom: 0;
        right: 0;
      }
      .ballText2::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 35px;
        background-color: #837f7e;
        left: 0;
        top: 0;
        background-color: #f4dfb1;
        border-radius: 100%;
        transform: translateY(-40%) translateX(-50%);
        border: 3px solid #505050;
      }
      /* 球3 */
      /* 球2 */
      .ball3 {
        display: flex;
        position: absolute;
        width: 20%;
        height: 20%;
        /* background-color: #81a594; */
        left: 12%;
        top: -5%;
      }
      .main-ball3::after {
        content: "---";
        width: 120px;
        height: 2px;
        position: absolute;
        transform: rotate(38deg);
        right: -170%;
        top: 100%;
        opacity: 0.6;
        background-color: linear-gradient(to bottom, #000000, #ffffff);
      }
      .ball3-container {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #81a594; */
      }
      .main-ball3 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90px;
        width: 90px;
        font-family: font3;
        font-size: 5em;
        position: absolute;
        left: 10%;
        top: -10%;
        border: 4px solid #505050;
        border-radius: 100%;
        background-color: #d4baba;
        z-index: 2;
      }
      .ballText.ballText3 {
        width: 14em;
        height: 9em;
        display: flex;
        font-family: font3;
        justify-content: center;
        background-color: #d4baba;
        position: absolute;
        flex-direction: column;
        align-items: center;
        transform: translateX(-90%) translateY(70%);
        border: 3px solid #505050;
        bottom: 0;
        right: 0;
      }
      .ballText3::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 35px;
        background-color: #837f7e;
        right: 0;
        top: 0;
        background-color: #f4dfb1;
        border-radius: 100%;
        transform: translateX(55%) translateY(-55%);
        border: 3px solid #505050;
      }
      /* 球4 */
      .ball4 {
        display: flex;
        position: absolute;
        width: 20%;
        height: 20%;

        right: 5%;
        bottom: 10%;
      }
      .main-ball4::after {
        content: "---";
        width: 120px;
        height: 2px;
        position: absolute;
        transform: rotate(29deg);
        left: -110%;
        top: -60%;
        opacity: 0.6;
        background-color: linear-gradient(to bottom, #000000, #ffffff);
      }
      .ball4-container {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #81a594; */
      }
      .main-ball4 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85px;
        width: 85px;
        font-family: font3;
        font-size: 5em;
        position: absolute;
        left: 10%;
        top: -10%;
        border: 4px solid #505050;
        border-radius: 100%;
        background-color: #f4e0ac;
        z-index: 2;
      }
      .ballText.ballText4 {
        width: 14em;
        height: 9em;
        display: flex;
        font-family: font3;
        justify-content: center;
        background-color: #f4e0ac;
        position: absolute;
        flex-direction: column;
        align-items: center;
        transform: translateX(50%) translateY(-125%);
        border: 3px solid #505050;
        bottom: 0;
        right: 0;
      }
      .ballText4::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 35px;
        background-color: #837f7e;
        left: 0;
        bottom: 0;
        background-color: #f4dfb1;
        border-radius: 100%;
        transform: translateX(-60%) translateY(60%);
        border: 3px solid #505050;
      }
      /* 显隐 */
      .ballText.ballText4,
      .ballText.ballText3,
      .ballText.ballText2,
      .ballText.ballText1 {
        transition: all 0.5s ease;
        opacity: 0;
      }
      .ballText.ballText4.active,
      .ballText.ballText3.active,
      .ballText.ballText2.active,
      .ballText.ballText1.active {
        opacity: 1;
      }

      /* 人 */
      /* 人物 */
      .people {
        position: absolute;
        display: flex;
        background-image: url(../img/people/精灵-0.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20%;
        height: 50%;
        max-width: 391px;
        max-height: 350px;
        bottom: 2%;
        left: 2%;
        opacity: 0.6;
        transition: all 0.5s ease;
      }
      .people.active {
        opacity: 0.6;
      }
      /* 竹子 */
      .zuzi {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 73% 100%;
        transform: rotate(10deg) translateX(10%);
        z-index: 3;
      }
      .zuzi2 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 210% 120%;
        background-position: 95% 100%;
        transform: rotate(-24deg);
        z-index: 3;
      }
      .zuzi3 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 85% 100%;
        transform: rotate(0deg);
        z-index: 3;
      }
      /* 切换按钮 */
      .lef-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        left: 0;
        transform: rotate(50deg) translateX(-60%);
        top: 33%;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s ease;
      }
      .lef-btn > img {
        width: 100%;
      }
      .lef-btn:hover {
        opacity: 1;
      }
      .right-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        right: 0;
        transform: rotate(-65deg) translateY(40%);
        z-index: 10;
        top: 38%;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s ease;
      }
      .right-btn > img {
        width: 100%;
      }
      .right-btn:hover {
        opacity: 1;
      }
      /* 鼠标跟随 */
      #follower {
        position: absolute;
        z-index: 999;
        transition: transform 0.1s ease;
        width: 20px;
        height: 20px;

        background-color: rgba(212, 38, 38, 0.4);
        position: absolute;
        border-radius: 50%; /* 将方形 div 变成圆形 */
        pointer-events: none;
      }
      /* 按钮 */
      .right-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
      .right-arr {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        position: absolute;
        z-index: 10;
        left: 7%;
        opacity: 0;
        top: 9%;
        transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
        cursor: pointer;
        transition: all 0.5s ease;
      }
      .left-btn {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        top: 10%;
        transform: scaleX(100%) scaleY(70%);
        position: absolute;
        cursor: pointer;
        opacity: 0;
        transition: all 0.5s ease;
      }
      .lef-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"></div>
          <div class="title">
            <span>内涵意义</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li class="active"><a href="./introduce.html">初识</a></li>
            <li><a href="./history.html">远溯</a></li>
            <li><a href="./kind.html">览境</a></li>
            <li><a href="./structure.html">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="main-container">
          <div class="cloud"></div>
          <div class="ball">
            <div class="ball1">
              <div class="ball1-container">
                <div class="main-ball1" onmouseover="initBox(0)">权</div>
                <div class="ballText ballText1">
                  <p>象征权利</p>
                  <span>王侯贵族手持团扇象征权势与追求</span>
                </div>
              </div>
            </div>
            <div class="ball2">
              <div class="ball2-container">
                <div class="main-ball2" onmouseover="initBox(1)">祥</div>
                <div class="ballText ballText2">
                  <p>辟邪消灾</p>
                  <span>宋代端午互赠团扇去邪气</span>
                </div>
              </div>
            </div>
            <div class="ball3">
              <div class="ball3-container">
                <div class="main-ball3" onmouseover="initBox(2)">阔</div>
                <div class="ballText ballText3">
                  <p>阔步高视</p>
                  <span>手持团扇遮面挡日，人姿态阔步。</span>
                </div>
              </div>
            </div>
            <div class="ball4">
              <div class="ball4-container">
                <div class="main-ball4" onmouseover="initBox(3)">团</div>
                <div class="ballText ballText4">
                  <p>结善团圆</p>
                  <span>“善”“扇”谐音象征团圆,圆满。</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- people -->
        <div class="people active"></div>
        <!-- 这里吧右下角的竹子去了 -->
        <div class="zuzi"></div>
        <div class="zuzi2"></div>
        <div class="zuzi3"></div>
        <div class="lef-btn">
          <img src="../img/last-btn.png" alt="" />
          <img class="left-btn" src="../img/left-btn.svg" alt="" />
        </div>
        <div class="right-btn">
          <img src="../img/next-6-btn.png" alt="" />
          <img class="right-arr" src="../img/left-btn.svg" alt="" />
        </div>
        <audio id="audio" loop>
          <source src="../audio/bacmusic3.MP3" />
        </audio>
      </div>
    </div>
  </body>
</html>
<script>
  (() => {
    window.onload = () => {
      initBody();
      initCloud();
      initBox();
      people();
      btn();
      initFollow();
      initBody();
      initRoute();

      player();
      loclaMusic();
    };
  })();

  // 播放
  // 保存播放状态
  function loclaMusic() {
    // 从本地存储中获取保存的播放状态
    const savedPlaybackState = localStorage.getItem("playbackState");

    // 如果有保存的播放状态
    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      // 设置音频的播放位置
      audio.currentTime = playbackState.currentTime;

      // 如果播放状态为播放中，则继续播放音频
      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;

    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();
    });
    // 结束 给人透明

    // 当音频播放或暂停时，保存播放状态到本地存储
    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    // 当音频播放位置发生变化时，实时更新播放状态到本地存储
    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  function initBody() {
    const main = document.querySelector(".main");
    setTimeout(() => {
      main.style.opacity = "1";
    }, 4);
  }

  function initCloud() {
    var repeatWords = [
      { name: "团圆", value: "1189" },
      { name: "辟邪消灾", value: "1056" },
      { name: "权利", value: "1456" },
      { name: "阔绰", value: "1455" },
      { name: "吉祥", value: "1312" },
      { name: "清凉", value: "1356" },
      { name: "避暑", value: "1453" },
      { name: "礼仪", value: "1343" },
      { name: "情感", value: "1643" },
      { name: "友善", value: "1209" },
      { name: "如意", value: "1051" },
      { name: "节令", value: "1230" },
      { name: "传统", value: "1028" },
      { name: "历史", value: "1132" },
      { name: "和谐", value: "1852" },
      { name: "审美", value: "1056" },
      { name: "才子佳人", value: "1025" },
      { name: "爱慕", value: "1147" },
      { name: "优雅", value: "1235" },
      { name: "温馨", value: "1653" },
      { name: "阖家欢乐", value: "1111" },
      { name: "悠久", value: "1356" },
      { name: "遮阳", value: "1356" },
      { name: "明月", value: "1102" },
      { name: "幸福", value: "1032" },
      { name: "安康", value: "1532" },
      { name: "遮羞", value: "1236" },
      { name: "辟邪", value: "1204" },
      { name: "礼贤下士", value: "1203" },
      { name: "寄情于物", value: "1263" },
      { name: "情愫", value: "1205" },
      { name: "手工", value: "1452" },
      { name: "精美", value: "1230" },
      { name: "审美", value: "1521" },
      { name: "才子佳人", value: "1023" },
      { name: "爱慕", value: "1054" },
      { name: "优雅", value: "1063" },
      { name: "温馨", value: "1025" },
      { name: "阖家欢乐", value: "1520" },
      { name: "悠久", value: "1420" },
      { name: "遮阳", value: "1620" },
      { name: "明月", value: "1203" },
      { name: "幸福", value: "1230" },
      { name: "安康", value: "1320" },
      { name: "遮羞", value: "1502" },
      { name: "辟邪", value: "1520" },
      { name: "礼贤下士", value: "1420" },
      { name: "寄情于物", value: "1630" },
      { name: "情愫", value: "1201" },
      { name: "手工", value: "1103" },
      { name: "精美", value: "1109" },
      { name: "团圆", value: "1189" },
      { name: "辟邪消灾", value: "1056" },
      { name: "权利", value: "1456" },
      { name: "阔绰", value: "1455" },
      { name: "吉祥", value: "1312" },
      { name: "清凉", value: "1356" },
      { name: "避暑", value: "1453" },
      { name: "礼仪", value: "1343" },
      { name: "情感", value: "1643" },
      { name: "友善", value: "1209" },
      { name: "如意", value: "1051" },
      { name: "节令", value: "1230" },
      { name: "传统", value: "1028" },
      { name: "历史", value: "1132" },
      { name: "和谐", value: "1852" },
      { name: "审美", value: "1056" },
    ];
    let repeatCount = 30;
    // let value = [];
    // for (let i = 0; i < repeatWords.length; i++) {
    //   let word = repeatWords[i];
    //   for (let j = 0; j < repeatCount; j++) {
    //     value.push({ name: word.name, value: word.value });
    //   }
    // }
    var data = {
      value: [
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "温馨", value: "1653" },
        { name: "阖家欢乐", value: "1111" },
        { name: "悠久", value: "1356" },
        { name: "遮阳", value: "1356" },
        { name: "明月", value: "1102" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "阖家欢乐", value: "1111" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "才子佳人", value: "1025" },
        { name: "爱慕", value: "1147" },
        { name: "优雅", value: "1235" },
        { name: "幸福", value: "1032" },
        { name: "安康", value: "1532" },
        { name: "遮羞", value: "1236" },
        { name: "辟邪", value: "1204" },
        { name: "礼贤下士", value: "1203" },
        { name: "寄情于物", value: "1263" },
        { name: "情愫", value: "1205" },
        { name: "手工", value: "1452" },
        { name: "精美", value: "1230" },
        { name: "审美", value: "1521" },
        { name: "才子佳人", value: "1023" },
        { name: "爱慕", value: "1054" },
        { name: "优雅", value: "1063" },
        { name: "温馨", value: "1025" },
        { name: "阖家欢乐", value: "1520" },
        { name: "悠久", value: "1420" },
        { name: "遮阳", value: "1620" },
        { name: "明月", value: "1203" },
        { name: "幸福", value: "1230" },
        { name: "安康", value: "1320" },
        { name: "遮羞", value: "1502" },
        { name: "辟邪", value: "1520" },
        { name: "礼贤下士", value: "1420" },
        { name: "寄情于物", value: "1630" },
        { name: "情愫", value: "1201" },
        { name: "手工", value: "1103" },
        { name: "精美", value: "1109" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
        { name: "礼贤下士", value: "1420" },
        { name: "寄情于物", value: "1630" },
        { name: "情愫", value: "1201" },
        { name: "手工", value: "1103" },
        { name: "精美", value: "1109" },
        { name: "团圆", value: "1189" },
        { name: "辟邪消灾", value: "1056" },
        { name: "权利", value: "1456" },
        { name: "阔绰", value: "1455" },
        { name: "吉祥", value: "1312" },
        { name: "清凉", value: "1356" },
        { name: "避暑", value: "1453" },
        { name: "礼仪", value: "1343" },
        { name: "情感", value: "1643" },
        { name: "友善", value: "1209" },
        { name: "如意", value: "1051" },
        { name: "节令", value: "1230" },
        { name: "传统", value: "1028" },
        { name: "历史", value: "1132" },
        { name: "和谐", value: "1852" },
        { name: "审美", value: "1056" },
      ],

      //图片
      image:
        "",
    };
    var myChart = echarts.init(document.querySelector(".cloud"));

    var maskImage = new Image();
    maskImage.src = data.image;
    const colorList = ["#597266", "#f4e0ac", "#ffcfcc", "#9d2933"];

    maskImage.onload = function () {
      myChart.setOption({
        backgroundColor: "rgba(255,255,255,.1)",
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 1,
            sizeRange: [12, 60],
            rotationRange: [-45, 0, 45, 90],
            maskImage: maskImage,
            keepAspect: false,
            width: "90%",
            height: "100%",
            textStyle: {
              color: function () {
                let index = Math.floor(Math.random() * colorList.length);
                return colorList[index];
              },
              fontWeight: "normal",
              fontFamily: "font3",

              fontSize: 1,
            },

            left: "0",
            top: "center",
            width: "90%",
            height: "100%",
            right: null,
            bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: data.value,
          },
        ],
      });
    };
  }

  // 按钮
  function btn() {
    const leftBtn = document.querySelector(".lef-btn");
 
    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "./area.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "./history.html";
    });
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 0) {
        li.addEventListener("mouseover", () => {
          lis[0].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[0].classList.add("active");
        });
      }
    });
  }

  function initBox(index) {
 
    let ballTexts = document.querySelectorAll(".ballText");
 
    if (ballTexts[index]) {
      ballTexts[index].classList.add("active");
    }
  }
  function people() {
    // 眨眼
    const people = document.querySelector(".people");
    let blank_index = 0;
    timeout = 4000;
    let blink = () => {
      if (blank_index == 2) {
        blank_index = 0;
        timeout = 4000;
      } else {
        blank_index += 1;
        timeout = 40;
      }
      people.style.backgroundImage = `url(../img/people/精灵-${blank_index}.png)`;
      setTimeout(() => {
        blink();
      }, timeout);
    };
    blink();
  }

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 3000);
  }
</script>
